<template>
  <!-- 通过类名类名控制标签的 路由跳转也可以直接通过 router-link来实现 to 指定跳转的路径 tag对应的标签
  动态类名的定义也可以通过索引 前提是这个样式是通过渲染生成的数据 可以根据索引 定义一个值 根据点击的传递索引赋值替换 在根据 是否相等来实现
  -->
  <div class="footer_guide border-1px">
    <span class="guide_item" :class="{on:'/msite' === $route.path}" @click="goto('/msite')">
      <span class="item_icon">
        <i class="iconfont icon-waimai"></i>
      </span>
      <span>外卖</span>
    </span>
    <span class="guide_item"  :class="{on:'/search' === $route.path}" @click="goto('/search')">
      <span class="item_icon">
        <i class="iconfont icon-search"></i>
      </span>
      <span>搜索</span>
    </span>
    <a href="javascript:;" class="guide_item"  :class="{on:'/order' === $route.path}"  @click="goto('/order')">
      <span class="item_icon">
        <i class="iconfont icon-dingdan"></i>
      </span>
      <span>订单</span>
    </a>
    <a href="javascript:;" class="guide_item"  :class="{on:'/profile' === $route.path}" @click="goto('/profile')" >
      <span class="item_icon">
        <i class="iconfont icon-geren"></i>
      </span>
      <span>我的</span>
    </a>
  </div>
</template>

<script>
export default {
  name:'',
  methods:{
   /*replace 替换路由，没有历史记录 
   push  本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录*/
    goto(path) {
      this.$router.replace(path)
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl';

.footer_guide { // footer
  top-border-1px(#e4e4e4);
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  height: 50px;
  display: flex;

  .guide_item {
    display: flex;
    flex: 1;
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin: 5px;
    color: #999999;

    &.on {
      color: #02a774;
    }

    span {
      font-size: 12px;
      margin-top: 2px;
      margin-bottom: 2px;

      .iconfont {
        font-size: 22px;
      }
    }
  }
}
</style>